<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>MyHtml.html</title>
		<script type="text/javascript" src="js/jquery.js"></script>
		<script type="text/javascript">
			//将1 ~ n-1范围的元素隐藏，只显示第一个和最后一个
			$(function(){
				$("#btn1").click(function(){
					$("ul li:gt(0):not(:last)").hide();
				});
			});
			//用循环来隐藏，隐藏的元素还在与删除不同，即索引可以用i++,i--
			$(function(){
				$("#btn3").click(function(){
					$("li").hide();
					$("li:lt(4)").show();
					alert($("li").length);
				});
			});
			$(function(){
				$("#btn2").click(function(){
					$("li").show();
				});
			});
			
			//将包含文本框输入内容的td显示，其他td隐藏
			$(function(){
				$("#name").keyup(function(){
					$("td").hide();//隐藏所有td
					$("td:contains('"+$(this).val()+"')").show();//满足条件的td显示
				});
			});
			//隔行变色
			$(function(){
				$("tr:even").css("background","red");
				$("tr:odd").css("background","green");
			});
		</script>
	</head>
	<body>
		<h1>
			选择器使用示例
		</h1>
		<input type="button" value="hide" id="btn1" />
		<input type="button" value="show" id="btn2" />
		<input type="button" value="hide last n" id="btn3" />
		<br />
		<ul>
			<li>
				待到
			</li>
			<li>
				明年
			</li>
			<li>
				春暧
			</li>
			<li>
				花开
			</li>
			<li>
				之日
			</li>
			<li>
				就是我与姑娘相逢之时
			</li>
		</ul>
		<hr />
		<input type="text" id="name">
		<table>
			<tr>
				<td>张三是为好同志！</td>
			</tr>
			<tr>
				<td>李四回家帮着父母干活！</td>
			</tr>
			<tr>
				<td>谁看过张三丰的电影！</td>
			</tr>
			<tr>
				<td>那个同事叫张什么来着！</td>
			</tr>
			<tr>
				<td>obama</td>
			</tr>
		</table>
	</body>
</html>
